import styles from './index.module.less';
import OnClickPage from './components/oneClick';
import PhonePage from './components/phone';
import { Checkbox } from '@nutui/nutui-react-taro';
import { useState } from 'react';
import Taro, { useReady } from '@tarojs/taro';
import { useUserStore } from '@/common/hox/userStore';
const LoginPage = () => {
    const [isCheck, setIsCheck] = useState(false);
    const toAgreement = (type: string) => {
        Taro.navigateTo({ url: '/pages/agreement/index?type=' + type });
    };
    const [type, setType] = useState<'BindUser' | 'Login'>('BindUser');
    const [LoginEnvironment, setLoginEnvironment] = useState<'OnClickPage' | 'Phone'>(
        'OnClickPage'
    );
    useReady(() => {
        if (process.env.TARO_ENV !== 'h5') {
            setType(!userInfo?.mobile && userInfo?.userId ? 'BindUser' : 'Login');
            setLoginEnvironment(!userInfo?.userId ? 'OnClickPage' : 'Phone');
        } else {
            setType('Login');
            setLoginEnvironment(!userInfo?.userId ? 'Phone' : 'OnClickPage');
        }
    });
    const { userInfo } = useUserStore();

    return (
        <div className={styles.LoginPage}>
            <div className={styles.logo}></div>
            {LoginEnvironment === 'OnClickPage' ? (
                <OnClickPage isCheck={isCheck} />
            ) : (
                <PhonePage key={type} isCheck={isCheck} type={type} />
            )}
            {type === 'Login' && LoginEnvironment !== 'Phone' && (
                <div
                    className={styles.checkOut}
                    style={{ margin: '20px auto 0', color: '#ccc' }}
                    onClick={() => {
                        setType('Login');
                        setLoginEnvironment('Phone');
                    }}
                >
                    手机验证码登录
                </div>
            )}
            <div className={styles.checkOut} onClick={() => Taro.navigateBack()}>
                暂不登录
            </div>
            <div className={styles.agreement}>
                <Checkbox
                    value="check"
                    checked={isCheck}
                    onChange={(value: boolean) => {
                        setIsCheck(Boolean(value));
                    }}
                ></Checkbox>
                <span style={{ color: '#999' }}>我已阅读并同意</span>
                <span onClick={() => toAgreement('UserAgreeMent')}>《用户协议》</span>
                <span onClick={() => toAgreement('PrivacyAgreement')}>《隐私协议》</span>
            </div>
        </div>
    );
};

export default LoginPage;
